 <?php
use yii\helpers\Url;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/reset.css" />
    <link rel="stylesheet" href="/static/css/goods.css" />
    <script src="/static/script/zepto.min.js"></script>
    <script src="/static/script/touch.slide.js"></script>
</head>
<body class="u-bg1">
<div id="j-slide" class="m-slide" pid="<?php echo $pid;?>">
    <ul class="f-cb">
        <?php if(isset($data['thumb'])){?>
            <?php foreach($data['thumb'] as $k=>$v){?>
                <li><img src="<?php echo $v;?>" /></li>
            <?php } ?>
        <?php } ?>
    </ul>
</div>

<dl class="m-gds-desc">
    <dt><?php if(isset($data['name'])){echo $data['name'];}?></dt>
    <dd>TRIBONG来自意大利，纯棉材质，设计灵感来自热带雨林的 的沿海气候，热情似火的色彩充满着活力</dd>
    <dd><em>￥ <b> <?php if(isset($data['price'])){echo $data['price'];}?></b></em><i>
            <?php if(isset($data['productInfo']['count']['result']['count'])){echo $data['productInfo']['count']['result']['count'];}?></i><i class="add-collect" data-pid="<?php if(isset($data['pid'])){echo $data['pid'];}?>"><?php if(isset($data['productInfo']['collect'])){echo $data['productInfo']['collect'];}?></i></dd>
</dl>

<?php if(isset($data['promotion'])&&$data['promotion']){?>
    <h4 class="m-gds-ct1">
        <span>领券</span>
        <?php foreach($data['promotion'] as $k=>$item){?>
            <?php  if($item[0]['type'] == 0 || $item[0]['type'] == 1) {?>
                <a href="javascript:;" data-groupid="<?php echo $item[0]['group_id'];?>">满<?php echo $item[0]['discount']['must_discount_price'] ?>减<?php echo $item[0]['discount']['value'] ?></a>
            <?php } ?>
            <?php  if($item[0]['type'] == 2 || $item[0]['type'] == 3) {?>
                <a href="javascript:;" data-groupid="<?php echo $item[0]['group_id'];?>">满<?php echo $item['0']['voucher']['must_voucher_price'] ?>减<?php echo $item[0]['voucher']['value']?></a>
            <?php } ?>
            <?php  if($item[0]['type'] == 4 || $item[0]['type'] == 5) {?>
                <a href="javascript:;" data-groupid="<?php echo $item[0]['group_id'];?>">满<?php echo $item['0']['exchange']['must_exchange_count'] ?>减<?php echo $item[0]['exchange']['must_exchange_price']?></a>
            <?php } ?>
        <?php } ?>
    </h4>
<?php } ?>

<h4 class="m-gds-ct2">
    <span>促销</span>
    <a href="javascript:;">赠品</a>
</h4>

<h4 class="m-gds-ct3" id="J_forAttr">
    颜色；尺码；数量 <span><?php if(isset($data['attr'])){echo $data['attr'];}?></span>
</h4>

<h4 class="m-gds-ct4">
    <span>剩余</span><em><?php if(isset($data['stock'])){echo $data['stock'];}?></em><br />
    <span>运费</span><em>免费</em>
</h4>

<h4 class="m-gds-ct5">
    <span>服务</span>
    <a href="javascript:;">支持七天无理由退换货</a>
    <a href="javascript:;">货到付款</a>
</h4>

<div class="m-gds-img">
    <?php if(isset($data['productDetail']['pictures'][0])){ ?>
        <?php echo $data['productDetail']['pictures'][0]; ?>
    <?php } ?>
</div>

<div class="m-gds-tab f-cb" id="J_sltGds_tab">
    <span class="z-on">商品评价</span>
    <span>商品参数</span>
</div>

<div class="m-cmmt J_sltGds_cnt">

    <h5 class="m-gds-comm f-cb">
        <span>评价</span>
        <b>好评：100%</b>
        <label>共 <em><?php echo $data['productInfo']['count']['result']['count']?></em> 条评论</label>
    </h5>

    <?php if(isset($data['productInfo']['result'])){?>
        <?php foreach($data['productInfo']['result'] as $k=>$v){ ?>
            <dl>
                <dt><b><?php echo $v['username']['nickname']?></b><span><small style="width:60%;"></small></span><em> <?php echo $v['created_at']?></em></dt>
                <dd class="desc"> <?php echo $v['content']?></dd>
                <dd class="attr"><?php echo $v['attr']?></dd>
            </dl>
        <?php } ?>
    <?php } ?>
    <a href="<?=url::to(['comment/index','product_id'=>isset($data['pid'])?$data['pid']:''])?>" class="m-gds-all-comm">查看全部评论</a>
</div>
<div class="m-detl J_sltGds_cnt">
    <?php if(isset($data['productDetail']['attribute'][0])){ ?>
        <?php echo $data['productDetail']['attribute'][0]; ?>
    <?php } ?>
</div>





<div class="m-gds-nav">
    <a href="javascript:;" class="add-collect" data-pid="<?php if(isset($data['pid'])){echo $data['pid'];}?>">收藏</a>
    <a href="<?=Url::to(['cart/view','shop_id' => isset($data['shop_id'])?$data['shop_id']:""])?>">购物车<em><?php if(isset($data['cartCount'])){echo $data['cartCount'];}?></em></a>
    <form action="<?=Url::to('/web/cart/add')?>" method="post" id="cartForm">
        <input type="hidden" name='product_id' class="cart-product-id" value="" />
        <input type="hidden" name="shop_id" value="" class="cart-shop-id"/>
        <input type="hidden" name="num" value="" class="cart-num"/>
        <a href="javascript:;" class="addCart">加入购物车</a>
    </form>
    <form action="<?=Url::to('/web/order/buy')?>" method="post" id="buyForm">
        <input type="hidden" name='product_id' value="" class="buy-product-id"/>
        <input type="hidden" name="shop_id" value="" class="buy-shop-id"/>
        <input type="hidden" name="hide_buy" value="1"/>
        <input type="hidden" name="num" value="" class="buy-num"/>
        <a href="javascript:;" class="buyCart">购买</a>
    </form>
</div>

<div class="mask" id="J_mask"></div>
<div class="m-slt-attr" id="J_sltAttr">
    <a href="javascript:;" id="J_clsAttr" class="close">&nbsp;</a>
    <dl class="f-cb">
        <dt><img src="<?php if(isset($data['thumb'][0])){echo $data['thumb'][0];}?>" /></dt>
        <dd><a href="javascript:;"><?php if(isset($data['name'])){echo $data['name'];}?></a></dd>
        <dd>￥ <?php if(isset($data['price'])){echo $data['price'];}?></dd>
    </dl>
    <?php if(isset($data['saleProp_list'])){?>
        <?php foreach($data['saleProp_list'] as $ka=>$va){?>
            <p>
                <b><?php echo $ka;?></b>
                <?php foreach($va as $kal=>$val){?>
                    <?php $flag=false;?>
                    <?php foreach ($data['newattr'] as $k=>$v) {?>
                        <?php if($kal == $k){?>
                            <?php $flag=true;?>
                        <?php }}?>
                    <a href="javascript:;" <?php if($flag){?> class="z-on" <?php }?> attr-id="<?php echo $kal;?>"><?php echo $val;?></a>
                <?php } ?>
            </p>
        <?php }?>
    <?php } ?>
    <h4>
        数量
		<span>
			<label>剩余<?php if(isset($data['stock'])){echo $data['stock'];}?></label>
			<a href="javascript:;" class="J_actNum">-</a><a href="javascript:;" id="J_count"><?php if($num){ echo $num;}else{?>1<?php }?></a><a href="javascript:;" class="z-add J_actNum">+</a>
		</span>
    </h4>
    <a href="javascript:;" class="u-sure" id="J_sure"><span>确定</span></a>
</div>

<script>

// 焦点图
$('#j-slide').touchSlide({'scale':.56, speed:.3});

$(function(){

    // lock scroll
    var def = function(e){ e.preventDefault(); };

    // Mask & Kernel
    var mask = $('#J_mask'), _kernel = kernel();

    // Tag & height
    var sltAttr = $('#J_sltAttr'), attrHt = sltAttr.height();
    sltAttr.css({'bottom':0 - attrHt});

    // cssText
    var _old = document.querySelector('#J_sltAttr').style.cssText;

    $('#J_forAttr').tap(function(){

        // lock
        document.addEventListener('touchmove', def, false);

        mask.show();
        document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .15s linear;'+ _kernel +'transform:translateY(-'+attrHt+'px);';

        sltAttr.find('img').show();
    });


    sltAttr.on('touchend', '#J_clsAttr', function(evt){

        sltAttr.find('img').hide();

        document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .3s linear;'+ _kernel +'transform:translateY(0px);';
        mask.hide();

        // unlock
        document.removeEventListener('touchmove', def, false);

        // 阻止点透
        evt.preventDefault();
        return false;
    });


    sltAttr.on('touchend', '#J_sure', function(evt){

        var _tmp = [];
        sltAttr.find('p').each(function(){
            var _that = $(this), _tit = _that.find('b').text(), _val = _that.find('a.z-on').text();
            _tmp.push(_tit + '：' + _val);
        });

        var _count = sltAttr.find('#J_count').text();
        _tmp.push('数量：' + _count);

        $('#J_forAttr').html(_tmp.join('; '));

        sltAttr.find('img').hide();

        document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .3s linear;'+ _kernel +'transform:translateY(0px);';
        mask.hide();


        var attr=[];
        var _num = $(this).parent('.m-slt-attr').find('#J_count').text();
        var _pid = $('.m-slide').attr('pid');
        $('.m-slt-attr p').each(function(){
            attr.push($(this).find('.z-on').attr('attr-id'))
        })
        $.get("<?=url::to(['product/herfpage'])?>",{attr:attr,num:_num,poid:_pid},function(data){
            if(data.status==1){
                window.location.href="/web/product/detail?pid="+data.pid+'&num='+data.num;
                return false;
            }else{
                alert(data.message);
            }

        },'jsonp');

        // unlock
        document.removeEventListener('touchmove', def, false);

        // 阻止点透
        evt.preventDefault();
        return false;
    });

    //
    sltAttr.on('touchend', 'p a', function(evt){

        $(this).addClass('z-on').siblings().removeClass('z-on');

        // 阻止点透
        evt.preventDefault();
        return false;
    });

    //
    var count = 1, total = <?php if(isset($data['stock'])){echo $data['stock'];}?>;
    sltAttr.on('touchend', 'a.J_actNum', function(evt){

        var _that = $(this);

        // add
        if(_that.hasClass('z-add')){

            if(total <= 0) return !1;

            count++;
            total--;
            _that.prev().text(count);

        }else{

            if(count <= 1) return !1;

            count--;
            total++;
            _that.next().text(count);
        }

        _that.parent().find('label').text('剩余'+ total)

        // $(this).addClass('z-on').siblings().removeClass('z-on');

        // 阻止点透
        evt.preventDefault();
        return false;
    });
    var zon = 'z-on';
    $('#J_sltGds_tab').on('tap', 'span', function(){

        var _this = $(this);

        if(_this.hasClass(zon)) return !1;

        _this.addClass(zon).siblings().removeClass(zon);

        var _i = $('#J_sltGds_tab span').index(_this);
        $('.J_sltGds_cnt').hide().eq(_i).show();
    });



$('.m-gds-ct1').click(function(){
    var _gropuid = $(this).find('a').attr('data-groupid');
    $.get('<?=url::to('receive')?>',{group_id:_gropuid},function(data){
        if(data.status==1){
            alert(data.message);
            return;
        }else if(data.status ==4 ){
            window.location.href = '/web/user/login';
            return;
        }else{
            alert(data.message);
        }
    },'jsonp')
})

$('.add-collect').click(function(){
    var _pid = $(this).attr('data-pid');
    $.get('<?=url::to('addcollect')?>',{pid:_pid},function(data){
        if(data.status==1){
            alert(data.message);
            return;
        }else if(data.status ==4 ){
            window.location.href = '/web/user/login';
            return;
        }else{
            alert(data.message);
        }
    },'jsonp')
    location.reload();
})

var _pid = $('.m-slide').attr('pid');
var _num = $('.m-slt-attr').find('#J_count').text();

$('.addCart').click(function(){
    $('.cart-product-id').val(_pid);
    $('.cart-num').val(_num);
    $("#cartForm").submit();
})
$('.buyCart').click(function(){
    $('.buy-product-id').val(_pid);
    $('.buy-num').val(_num);
    $("#buyForm").submit();
})

});

// get kernel
function kernel(){
    var _style = document.createElement('div').style;
    var _kernel = ['-webkit-', '-moz-', '-o-', '-ms-'];
    for(var i in _kernel){
        var _v = _kernel[i] + 'transform';
        if(_style[_v] !== undefined) return _kernel[i];
    }
    return '';
}
</script>
</body>
</html>